<!--
- Author:   .
- Date:    2017/8/4 0004.
- File:    list.
-->
<template>
  <div>
    <div class="bod_box">
      <div class="Header">我的朋友：{{memberList.data.length}}人</div>
    </div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="false"
      infinite-scroll-distance="0"
      infinite-scroll-immediate-check="false">
      <div class="sub_block" v-for="item in memberList.data">
        <div class="block f-cb">客户姓名：{{item.member_name}}<span class="fr">电话：{{item.member_mobile}}</span></div>
        <div class="block f-cb"><span class="pt5 disib">购买订单数：{{item.ordertotal}}</span><a @click="gotoOrderList(item.member_id)" class="look">查看</a></div>
      </div>
    </div>
    <loading-more :allLoaded="memberList.allLoaded" :show="memberList.data.length > 0"></loading-more>
    <empty-data :show="memberList.allLoaded && memberList.data.length <= 0"></empty-data>
    <footer-tab></footer-tab>
  </div>
</template>

<script>
//  import {MessageBox} from 'mint-ui'

  export default{
    data() {
      return {
        memberList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getSubMemberList(this.memberList.page, this.memberList.pageSize)
    },
    methods: {
      gotoOrderList(id) {
        this.$router.push({name: 'invited-order', params: {id: id}})
      },
      getSubMemberList(page, pageSize) {
        this.memberList.loading = true
        this.$request.getSubMemberList(page, pageSize).then(data => {
          if (data.length < this.memberList.pageSize) {
            this.memberList.allLoaded = true
          }
          this.memberList.data = [...this.memberList.data, ...data]
        }).finally(() => {
          this.memberList.requested = true
          this.memberList.loading = false
        })
      },
      loadMore() {
        if (this.memberList.loading || this.memberList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getSubMemberList(++this.memberList.page, this.memberList.pageSize)
        }, 500)
      }
    }
  }
</script>

<style>

</style>